<template>
<div>
  <div v-if="returnHistory" @click="returnHistoryClick" style="width: 5rem;height: 4rem;position: absolute;left: 0;top: 0;z-index: 99;"></div>
  <div ref="headAnim">
    <div class="accountCon clearFix">
      <div class="account">
        <span>总金额（元）</span>
      </div>
      <div class="account_num">
        <p>{{myWallet.totalAmt||'0'}}<i v-show="accountState">元</i></p>
      </div>
      <div class="account_del">
        <p><span>奖励金总收入（元）</span><span>{{myWallet.totalAmt||'0'}}</span></p>
        <p><span>可使用金额（元）</span><span>{{myWallet.useAmt||'0'}}</span></p>
        <p><span>待入账奖励金（元）</span><span>{{myWallet.waitAwardAmt||'0'}}</span></p>
      </div>
    </div>
    <div :class="{accountConEnd: accountState}">
      <div class="wallet_total clearFix white_bg" v-if="accountState">
        <div class="left">
          <p class="wallet_title color_gray_02 md_m_font">钱包总金额</p>
          <p class="color_ec md_m_font"><b>{{myWallet.totalAmt||'0'}}<i v-show="accountState">元</i></b></p>
        </div>
        <div class="right color_gray_03">
          <p @click="showTypeAll" class="wallet_types left" :class="{'color_ec':!statusAll}">
            <span class="md_s_font">{{typeName}}</span>
            <i :class="statusAll ? 'iconfont icon-down' : 'iconfont icon-iconfontunfold'" class="sm_font"></i>
          </p>
          <p class="wallet_date right" @click="showTypeDate" :class="{'color_ec':!statusDate}">
            <span class="md_s_font">日期</span>
            <i :class="statusDate ? 'iconfont icon-down' : 'iconfont icon-iconfontunfold'" class="sm_font"></i>
          </p>
        </div>
      </div>
      <div class="account_tit clearFix" v-else>
        <div class="wallet_title color_gray_02 md_m_font left"><b>钱包明细</b></div>
        <div class="right color_gray_03">
          <p @click="showTypeAll" class="wallet_types left" :class="{'color_ec':!statusAll}">
            <span class="md_s_font">{{typeName}}</span>
            <i class="sm_font" :class="statusAll ? 'iconfont icon-down' : 'iconfont icon-iconfontunfold'"></i>
          </p>
          <p class="wallet_date right" @click="showTypeDate" :class="{'color_ec':!statusDate}">
            <span class="md_s_font">日期</span>
            <i class="sm_font" :class="statusDate ? 'iconfont icon-down' : 'iconfont icon-iconfontunfold'"></i>
          </p>
        </div>
      </div>
      <div class="account_wallet md_s_font" v-if="TypeAll">
        <span :class="{'color_ec':indexTab == index}" v-for="(item,index) in typeList" @click="switchTab(index, item)" :key="index" class="wallet_type white_bg color_gray_03">{{item}}</span>
      </div>
      <div class="account_wallet" v-if="TypeDate">
        <div class="wallet_date_wrp">
          <input readonly class="searchTime color_gray" @click="openPicker('0')" v-model="startValue" />
          <span class="white_bg color_gray">至</span>
          <input readonly class="searchTime color_gray" @click="openPicker('1')" v-model="endValue" />
        </div>
        <mt-datetime-picker @confirm="handleConfirm" v-model="pickerValue" type="date" :endDate="endDate" year-format="{value} 年" month-format="{value} 月" date-format="{value} 日" ref="picker">
        </mt-datetime-picker>
        <div class="beSureBtn" @click="startSearch">确定</div>
      </div>
      <div class="wallet_shadowBox" v-show="showShadowBox" @click="hiddenShadowBox"></div>
    </div>
  </div>
  <div class="account_list" v-infinite-scroll="moreList" infinite-scroll-disabled="loading" infinite-scroll-immediate-check="true" infinite-scroll-distance="100" ref="asdList">
    <ul ref="payment_list">
      <li v-for="(item,index) in myWalletList" :key="index" @click="accountDetail(item)" class="white_bg">
        <div class="left account_item">
          <div class="account_list_l">
            <div class="md_s_font account_list_wrp">
              <b>{{ item.txnType || item.event | paymentTp }}</b>
              <span class="account_list_span">{{ item.txnType || item.event | paymentTp2}}</span>
              <span class="account_list_span" v-if="typeName === '奖励金' && item.event === 'SHARE'">{{item.verFlag === '1'?'（核销前）':'（核销后）'}}</span>
              <span class="account_list_span" v-if="typeName === '奖励金'">{{item.marketType === 'sett'?'（结算）': ''}}</span>
              <span class="account_list_num md_l_font right" :class="{color_gray_03: item.state  === '1' }">{{item.txnType === 'transfer'? '-': '+'}}{{item.eventAmt || item.txnAmt || item.rollAmt}}</span>
            </div>
            <p class="account_date">
              <span class="left">{{item.txnDateAndTxnTime || item.txnDate | strDate}}</span>
              <span class="right md_m_font" v-if="item.state !== '1'">{{item.totalAmt}}</span>
            </p>
          </div>
        </div>
        <i class="icon iconfont icon-right"></i>
      </li>
    </ul>
    <go-top v-show="goTopState" ref="goTopId"></go-top>
    <no-data v-if="noInfo"></no-data>
    <div class="lastInfoMore" v-if="!moreInfo&&myWalletList.length>3">没有更多</div>
  </div>
  <div class="bottom_btn">
    <p @click="$router.push('/qidai')">充值</p>
    <p @click="Withdrawals">提现</p>
  </div>
</div>
</template>
<script>
import * as types from 'src/vuex/types.js'
import listLoading from '../../componentes/global/listLoading.vue'
import {
  mapState,
  mapGetters
} from 'vuex'
import {
  DatetimePicker,
  Toast
} from 'mint-ui'
import {
  Storage
} from '../../utils/storage.js'

export default {
  data: function() {
    return {
      typeList: ['全部', '奖励金', '购券', '提现'],
      loading: true,
      noMoreCoupon: true,
      indexTab: '0',
      noInfo: false,
      accountState: false,
      seatHeight: '0',
      moreInfo: true,
      goTopState: false,
      TypeAll: false,
      TypeDate: false,
      statusAll: true,
      statusDate: true,
      showShadowBox: false,
      typeName: '全部',
      pickerValue: '',
      startValue: '',
      endValue: '',
      timeType: '',
      endDate: new Date(),
      startDate: new Date(),
      returnHistory: this.$route.query.returnHistory
    }
  },
  components: {
    listLoading
  },
  beforeRouteLeave(to, from, next) {
    // 避免返回时未清除定时器
    if (this.$refs.goTopId) {
      this.$refs.goTopId.clear();
    }
    window.removeEventListener('scroll', this.gotopScroll);
    window.removeEventListener('scroll', this.handleScroll);
    if(to.path==='/presentResults'){
    	next({name:'center'})
    }

    next()
  },
    mounted: function() {
    	let me=this
    this.$nextTick(() => {
    	     window.addEventListener("popstate", function(e) {
          if (me.$route.query.returnHistory) {
            // console.log(111);
            me.$router.replace({name:"home"});
          }
        }, false);
//      docment.body.picker-slot-center:nth-child(3){
//		display: none;
//	}
    });
  },
  created: function() {
    //解决ios返回出现空白问题
    setTimeout(function() {
      window.scrollTo(0, 1)
      window.scrollTo(0, 0)
    }, 100)
    // 监视滚动
    window.addEventListener('scroll', this.gotopScroll);
    window.addEventListener('scroll', this.handleScroll);
    this.$store.commit(types.GET_MYWALLETLIST); //初始化列表
    this.$store.commit(types.MYWALLET_PAGE, 1); //初始化分页
    this.queryTotal()
    this.clickMoreList();
  },
  computed: {
    ...mapState({
      myWallet: state => state.center.myWallet,
      myWalletList: state => state.center.myWalletList, //paymentList
      myWalletPageLimit: state => state.center.myWalletPageLimit, //paymentPageLimit
    }),
    ...mapGetters(['userInfo'])
  },
  methods: {
    returnHistoryClick() {
      this.$router.push({
        path: '/center'
      })
    },
    // 钱包总金额
    queryTotal() {
      this.$store.dispatch('getMyWallet', {
        params: {
          method: 'get'
        },
        usrId: this.userInfo.usrId
      })
    },
    //回到顶部
    gotopScroll() {
      var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
      var scrollHeight = document.documentElement.clientHeight || document.body.scrollTop;
      if (scrollTop >= scrollHeight + 50) {
        this.goTopState = true
      } else {
        this.goTopState = false
      }
      //回到顶部过程中用户滚动滚动条，停止定时器
      if (scrollTop <= 0) {
        if (this.$refs.goTopId) {
          this.$refs.goTopId.clear();
        }
      }
    },
    //切换按钮
    switchTab(num, type) {
      this.$store.commit(types.GET_MYWALLETLIST); //初始化列表
      this.$store.commit(types.MYWALLET_PAGE, 1); //初始化分页
      this.indexTab = num;
      this.typeName = type;
      this.noMoreCoupon = true;
      this.moreInfo = true;
      this.showShadowBox = false;
      this.TypeAll = false;
      this.TypeDate = false;
      this.statusAll = true;
      this.statusDate = true;
      this.clickMoreList();
      // document.body.style.overflow = 'visible';
    },
    //分页请求
    clickMoreList: function() {
      if (!this.noMoreCoupon) { //防止重复点击
        return
      }
      let me = this;
      this.noMoreCoupon = false;
      this.loading = true
      let beginDate = this.startValue ? this.startValue.split('-').join('') : ''
      let endDate = this.endValue ? this.endValue.split('-').join('') : ''
      let data = {
        queryType: me.indexTab,
        usrId: me.userInfo.usrId,
        walletAccType: "U",
        beginDate,
        endDate
      }
      this.$store.dispatch('getMyWalletList', {
        method: 'post',
        data
      }).then(function(rep) {
        if (rep.content.total <= 0 || !rep.content) {
          me.noInfo = true;
          return
        } else {
          me.noInfo = false;
        }
        if (rep.respCode !== '00') {
          Toast({
            message: rep.errorInfo,
            duration: 1000
          });
          return
        }

        if (rep.content.list) {
          if (rep.content.list.length < me.myWalletPageLimit) {
            me.moreInfo = false;
            setTimeout(function() {
              me.noMoreCoupon = true;
            }, 300);
          }
          if (rep.content.list.length == me.myWalletPageLimit) { //如果列表数据够10条，开启下拉加载
            me.moreInfo = true;
            me.loading = false;
            me.noMoreCoupon = false;
          } else {
            me.loading = true;
          }
        } else {

          setTimeout(function() {
            me.noMoreCoupon = true;
          }, 300);
        }
      }).catch(function(rep) {
        setTimeout(function() {
          me.noMoreCoupon = true;
        }, 300);
      });
    },
    moreList: function() {
      this.loading = true;
      this.noMoreCoupon = true;
      this.clickMoreList();
    },
    //监听滚动事件
    handleScroll() {
      let scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
      if (scrollTop >= 300) {
        this.accountState = true;
      } else if (scrollTop === 0) {
        this.accountState = false;
      }
    },
    //选择按类型显示
    showTypeAll() {
      if (this.statusAll) {
        this.statusAll = false;
        this.TypeAll = true;
        this.TypeDate = false;
        this.statusDate = true;
        this.showShadowBox = true;
        // document.body.style.overflow = 'hidden'
      } else {
        this.statusAll = true;
        this.TypeAll = false;
        this.statusDate = true;
        this.showShadowBox = false;
        // document.body.style.overflow = 'visible'
      }

    },
    //选择按时间显示
    showTypeDate() {
      // document.body.style.overflow = this.statusDate ? 'hidden' : 'visible';
      if (this.statusDate) {
        this.statusDate = false;
        this.TypeAll = false;
        this.TypeDate = true;
        this.statusAll = true;
        this.showShadowBox = true;
      } else {
        this.statusDate = true;
        this.TypeDate = false;
        this.statusAll = true;
        this.showShadowBox = false;
      }

    },
    hiddenShadowBox() {
      this.showShadowBox = false;
      this.statusAll = true;
      this.TypeAll = false;
      this.statusDate = true;
      this.TypeDate = false;
      // document.body.style.overflow = 'visible';
    },
    //跳转至明细详情页面
    accountDetail(params) {
      console.log(params);
      if (params.state !== '1') {
        Storage.set("walletDetail", Object.assign(params, {
          typeName: this.typeName
        }), true);
        this.$router.push({
          name: 'walletDetail'
        });
      }
    },
    //按日期搜索
    startSearch() {
    	
      if ((this.startValue.split('-').join('')) > (this.endValue.split('-').join(''))) {
        Toast({
          message: '请输入正确的起始日期',
          duration: 1000
        });
      } else {
        this.statusDate = true
        this.TypeDate = false
        this.showShadowBox = false
        // document.body.style.overflow = 'visible';
        this.$store.commit(types.GET_MYWALLETLIST); //初始化列表
        this.$store.commit(types.MYWALLET_PAGE, 1); //初始化分页
        this.moreList()
      }
    },
    openPicker(type) {
      this.$refs.picker.open();
      if (type == '0') {
        this.timeType = 0;
      }
      if (type == '1') {
        this.timeType = 1;
      }

    },
    handleConfirm() {
      if (this.timeType == 0) {
        this.startValue = this.pickerValue.toISOString().slice(0, 10);
        let date = new Date(this.startValue);
        date.setDate(date.getDate() + 1);
        this.startValue = date.toISOString().slice(0, 10);

      }
      if (this.timeType == 1) {
        this.endValue = this.pickerValue.toISOString().slice(0, 10);
        let date = new Date(this.endValue);
        date.setDate(date.getDate() + 1);
        this.endValue = date.toISOString().slice(0, 10);
      }
    },
    Withdrawals() {
      if (this.myWallet.totalAmt < 0.1) {
        Toast({
            message:'总金额大于1元才能提现！', //暂不支持提现,敬请期待
            duration: 1000
        });
      } else {
//      this.$router.push('/qidai')
           this.$router.push({
             path: '/Withdrawals'
           })
           Storage.set('total', this.myWallet.totalAmt, true)
      }
    }
  },
  destroyed() {
  },
  watch: {
    showShadowBox(newVal) {
      if (newVal) {
        // document.body.style.overflow = 'hidden'
      } else {
      }
    }
  }
}
</script>
<style scoped>
.accountCon {
  background: url('../../images/myWallet_bg.png') center no-repeat;
  background-size: 100% 100%;
  color: #fff;
  height: 15.7rem;
  width: 100%;
  position: relative;
  transition: all 0.5s;
  z-index: 97;
}

.account {
  position: relative;
  height: 4rem;
  width: 100%;
}

.account span {
  padding-top: 2.8rem;
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  font-weight: bold;
  text-align: center;
  display: block;
}

.account_num {
  position: relative;
  width: 100%;
  height: 6.5rem;
}

.account_num p {
  padding-top: .8rem;
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  text-align: center;
  font-size: 2.6rem;
}

.account_del {
  position: relative;
  width: 100%;
  padding: 0;
  box-sizing: border-box;
}

.account_del p {
  float: left;
  width: 33.33%;
  font-size: .8rem;
  text-align: center;
  border-right: 1px solid #fe8b96;
}

.account_del p:nth-child(3) {
  border: none;
}

.account_del p span {
  display: block;
  font-size: .8rem;
}

.account_del p span:nth-child(2) {
  font-size: 1.4rem;
  padding-top: .667rem;
}

.accountConEnd {
  height: 4.06rem;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 99;
  background: #fff;
  border-bottom: 1px solid #f5f5f5;
}

.wallet_total {
  padding: .667rem .667rem;
  overflow: hidden;
  position: relative;
  z-index: 2;
}

.head_anim {
  width: 100%;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 99;
}

.account_wallet {
  position: absolute;
  z-index: 99;
  background: #f5f5f5;
  width: 100%;
  border-top: 1px solid #e7e7e7;
  box-sizing: border-box;
  padding: 3.8%;
}

.account_wallet>.wallet_type {
  display: inline-block;
  width: 21%;
  text-align: center;
  box-sizing: border-box;
  margin: 2% 2%;
  line-height: 2.4rem;
}

.account_tit {
  background: #f5f5f5;
  line-height: 3.36rem;
  padding: 0 .667rem;
  overflow: hidden;
  position: relative;
  z-index: 98;
}

.account_tit span {
  float: left;
  text-align: right;
}

.account_tit .wd1 {
  width: 31%;
  text-align: left;
  color: #333;
}

.account_tit .wd2,
.accountConEnd .wd2 {
  width: 17%;
  color: #666;
  float: right;
  margin-left: 1.2rem;
}

.account_tit .wd2,
.accountConEnd .wd2 i {
  margin-left: .5rem;
}

.account_list_span {
  color: #666;
}

.account_list {
  background: #f5f5f5;
}

.account_list_r {
  float: right;
  line-height: 4rem;
  font-size: 1rem;
}

.account_list {
  padding-bottom: 3.6rem;
}

.account_list li {
  border-bottom: 1px solid #efefef;
  border-top: 1px solid #efefef;
  min-height: 4rem;
  overflow: hidden;
  padding: 0 .667rem;
  font-size: 1rem;
  overflow: hidden;
  margin-bottom: .5rem;
}

.account_list .account_item {
  width: 90%;
}

.account_list li i {
  float: right;
  line-height: 4rem;
}

.account_date {
  font-size: 1rem;
  color: #999;
}

.account_date span.left {
  margin-top: 0.4rem
}

.account_list_wrp::after,
.account_date::after {
  content: "";
  clear: both;
  display: block;
}

.account_list_l {
  padding: .72rem 0;
}

.account_list_l b {
  margin-right: 0.3rem
}

.wallet_shadowBox {
  width: 100%;
  background: rgba(0, 0, 0, .8);
  position: fixed;
  left: 0;
  top: 48px;
  bottom: 0;
  z-index: 1
}

.bottom_btn {
  position: fixed;
  bottom: 0;
  height: 3rem;
  background: #fff;
  width: 100%;
  border-top: 1px solid #f5f5f5;
}

.bottom_btn p {
  width: 50%;
  text-align: center;
  float: left;
  line-height: 3rem;
  font-weight: bold;
  color: #666;
}

.bottom_btn p:nth-child(2) {
  background: #ec4e8a;
  color: #fff;
}

.beSureBtn {
  width: 100%;
  background: #ec4e8a;
  height: 3rem;
  border-radius: .2rem;
  color: #fff;
  text-align: center;
  line-height: 3rem;
  margin-top: 1.2rem;
}

.go_top {
  bottom: 3rem;
}

.wallet_date_wrp {
  width: 100%;
}

.wallet_date_wrp>span {
  display: inline-block;
  width: 17.5%;
  text-align: center;
  box-sizing: border-box;
  margin: 2% 0;
  padding: 0 2.5%;
  line-height: 2rem;
  background-color: #f5f5f5;
}

.wallet_date_wrp>.searchTime {
  font-size: 1rem;
  width: 40%;
  padding-left: 6%;
  line-height: 3rem;
  border: 1px solid #bcbcbc;
  border-radius: .2rem;
  background-image: url('../../images/underIcon.png');
  display: inline-block;
  background-repeat: no-repeat;
  background-size: 1rem;
  background-position: 8rem 1.2rem;
}

.wallet_title {
  font-weight: bold;
}

.wallet_types {
  padding-right: 1.6rem;
}

.wallet_types>span,
.wallet_date>span {
  display: inline-block;
  padding-right: 0.3rem;
}
</style>
